<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAPD行动计划表SOP模板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- JS 库将移到 body 底部 -->
    
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Source+Han+Sans+CN:wght@300;400;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色
                        danger: '#EF4444', // 红色
                        'light-blue-bg': '#EFF6FF',
                        'dark-blue-text': '#1E40AF',
                        'icon-blue': '#60A5FA',
                        'icon-green': '#34D399',
                        'icon-purple': '#A78BFA',
                        'icon-orange': '#F59E0B',
                    }
                }
            }
        }
    </script>
    <style>
        /* 复用 麦肯锡/A3 的样式 */
        body {
            font-family: 'Source Han Sans CN', sans-serif;
            font-weight: 300;
            background-color: #f3f4f6;
        }
        h1, h2, h3, blockquote {
            font-family: 'Noto Serif SC', serif;
        }

        .tool-container {
            width: 1000px; 
            max-width: 90vw;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin: 40px auto;
            padding: 40px;
        }
        
        /* 导出按钮样式 */
        .export-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            border: none;
            padding: 12px 28px;
            font-size: 1.0em;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: opacity 0.3s, transform 0.2s;
            font-family: 'Source Han Sans CN', sans-serif;
            text-decoration: none;
        }
        .btn-pdf {
            background-color: #EF4444; /* 红色 */
        }
        .btn-pdf:hover { opacity: 0.85; transform: translateY(-1px); }
        
        .btn-doc {
            background-color: #3B82F6; /* 蓝色 */
            margin-left: 16px;
        }
        .btn-doc:hover { opacity: 0.85; transform: translateY(-1px); }

        .export-btn.loading {
            background-color: #9ca3af;
            cursor: wait;
        }

        /* 笔记法标题图标 */
        .section-title-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #EFF6FF;
            color: #3B82F6;
            flex-shrink: 0;
            margin-right: 12px;
        }

        /* 笔记法特定样式 */
        .column-header {
            display: flex;
            align-items: center;
            font-size: 1.2em;
            font-weight: 700;
            font-family: 'Noto Serif SC', serif;
            margin-bottom: 16px;
            margin-top: 24px; /* 模块间距 */
        }
        
        /* 编辑框 */
        .editable-box {
            width: 100%;
            min-height: 120px; 
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #f9f9f9;
            font-size: 14px;
            line-height: 1.7;
            cursor: text;
        }
        .editable-box:focus {
            outline: 2px solid var(--theme-primary);
            background-color: #fff;
            border-color: var(--theme-primary);
        }
        .editable-box:empty:before {
            content: "点击填写...";
            color: #aaa;
            font-style: italic;
        }
        
        /* 打印时隐藏的元素 */
        @media print {
            .no-print { display: none; }
        }
        /* 在CAPD.html的<style>标签最后添加这些样式 */
/* 隐藏导出按钮的类 */
.hide-export-buttons .export-buttons {
    display: none !important;
}

/* 推荐标签样式 - 红底白字 */
.recommend-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc2626; /* 红色背景 */
    color: white; /* 白色文字 */
    font-size: 0.65rem;
    font-weight: bold;
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: rotate(8deg);
    z-index: 10;
    white-space: nowrap;
}
.button-with-badge {
    position: relative;
    display: inline-block;
    margin-left: 16px;
}
    </style>
</head>
<body class="bg-gray-100">

    <div class="tool-container" id="capd-export-area">

        <!-- 页面头部 -->
        <header class="mb-8 no-print"> 
            <h1 class="text-3xl font-bold text-gray-800">CAPD行动计划表SOP模板</h1>
            <p class="text-lg text-gray-500 mt-2">目标管理与执行工具</p>
        </header>

        <!-- 方法简介 -->
        <div class="bg-light-blue-bg border-l-4 border-primary p-6 rounded-lg my-6 no-print">
            <h3 class="font-bold text-lg text-dark-blue-text">方法简介</h3>
            <p class="text-gray-700 mt-2">
                CAPD（Check-Action-Plan-Do）是PDCA的优化版，它强调“检查先行”，先检查现状与目标的差距，再进行调整、规划和执行。
            </p>
        </div>

        <!-- 导出按钮区域 -->
        <div class="my-8 text-left no-print">
            <button class="export-btn btn-pdf" id="pdf-button">
                <span>导出为PDF</span>
            </button>
            <a href="#" class="export-btn btn-doc" id="doc-button">
                <span>导出为文档</span>
            </a>
            <!-- 在CAPD.html的导出按钮区域添加这个 -->
<div class="button-with-badge">
    <button id="export-screenshot" class="export-btn" style="background-color: #8B5CF6;">
        <span><i data-lucide="camera" class="inline-block w-5 h-5 mr-2"></i> 导出长截图</span>
    </button>
    <span class="recommend-badge">推荐</span>
</div>
        </div>

        <!-- 在线填写区域 -->
        <section id="capd-content" class="border-t border-gray-200 pt-8">
            
            <!-- 大标题 -->
            <div class="flex items-center mb-6">
                <div class="section-title-icon" id="title-icon-placeholder">
                    <!-- JS会在此处插入图标 -->
                </div>
                <h2 id="note-title" class="text-2xl font-bold text-gray-800" contenteditable="true">[请填写计划主题]</h2>
            </div>
            
            <!-- 垂直布局 -->
            <div style="display: block;">
                
                <!-- 1. 目标 -->
                <div>
                    <div class="column-header">
                        <span id="icon-obj" class="mr-2 text-danger"></span> <!-- 红色 -->
                        Objective (目标)
                    </div>
                    <div id="col-obj" class="editable-box" contenteditable="true"></div>
                </div>

                <!-- 2. 检查 -->
                <div>
                    <div class="column-header">
                        <span id="icon-check" class="mr-2 text-icon-blue"></span>
                        Check (检查)
                    </div>
                    <div id="col-check" class="editable-box" contenteditable="true"></div>
                </div>

                <!-- 3. 方向 -->
                <div>
                    <div class="column-header">
                        <span id="icon-action" class="mr-2 text-icon-purple"></span>
                        Action (方向)
                    </div>
                    <div id="col-action" class="editable-box" contenteditable="true"></div>
                </div>

                <!-- 4. 计划 -->
                <div>
                    <div class="column-header">
                        <span id="icon-plan" class="mr-2 text-icon-orange"></span>
                        Plan (计划)
                    </div>
                    <div id="col-plan" class="editable-box" contenteditable="true"></div>
                </div>
                
                <!-- 5. 执行 -->
                <div>
                    <div class="column-header">
                        <span id="icon-do" class="mr-2 text-icon-green"></span>
                        Do (执行)
                    </div>
                    <div id="col-do" class="editable-box" contenteditable="true"></div>
                </div>
            </div>
        </section>
        
        <!-- *** 新增板块 1: 使用提示 *** -->
        <div class="bg-yellow-50 border border-yellow-200 p-6 rounded-lg my-8 no-print">
            <h3 class="font-bold text-lg text-yellow-800 flex items-center">
                <span id="icon-tips-placeholder" class="mr-2 text-yellow-600">
                    <!-- JS会在此处插入图标 -->
                </span>
                CAPD 使用提示
            </h3>
            <ul class="list-disc pl-10 mt-4 text-gray-700 space-y-2">
                <li><b>目标 (Objective):</b> 应该是有挑战性、鼓舞人心的，描述您想要实现的结果。</li>
                <li><b>检查 (Check):</b> 这是CAPD的核心。先检查现状与目标的差距，找到关键问题。</li>
                <li><b>方向 (Action):</b> 针对检查出的问题，制定修正方向或策略。</li>
                <li><b>计划 (Plan):</b> 将“方向”拆解为具体的、可衡量的、有时间节点的任务。</li>
                <li><b>执行 (Do):</b> 落地执行计划，并为下一次“Check”收集数据。</li>
            </ul>
        </div>
        
        <!-- *** 新增板块 2: 页脚 *** -->
        <div class="flex items-center text-green-600 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 no-print">
            <span id="footer-icon-placeholder" class="mr-2">
                <!-- JS会在此处插入图标 -->
            </span>
            <span>CAPD行动计划表 · 职场观察者知识库工具</span>
        </div>
        <div class="h-16 no-print"></div> <!-- 底部留白 -->
        
    </div> <!-- .tool-container end -->

    <!-- JS 库 -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <script>
        window.onload = function() {
            try {
                // --- 1. 图标加载 ---
                if (typeof lucide !== 'undefined') {
                    // 按钮图标
                    document.getElementById('pdf-button').innerHTML = '<i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为PDF';
                    document.getElementById('doc-button').innerHTML = '<i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为文档';
                    
                    // 内容图标
                    document.getElementById('title-icon-placeholder').innerHTML = '<i data-lucide="clipboard-list" class="w-5 h-5"></i>';
                    document.getElementById('icon-obj').innerHTML = '<i data-lucide="target" class="w-5 h-5"></i>';
                    document.getElementById('icon-check').innerHTML = '<i data-lucide="clipboard-check" class="w-5 h-5"></i>';
                    document.getElementById('icon-action').innerHTML = '<i data-lucide="compass" class="w-5 h-5"></i>';
                    document.getElementById('icon-plan').innerHTML = '<i data-lucide="list-todo" class="w-5 h-5"></i>';
                    document.getElementById('icon-do').innerHTML = '<i data-lucide="play-circle" class="w-5 h-5"></i>';
                    
                    // 新增图标
                    const tipsIcon = document.getElementById('icon-tips-placeholder');
                    if (tipsIcon) tipsIcon.innerHTML = '<i data-lucide="lightbulb" class="w-5 h-5"></i>';
                    
                    const footerIcon = document.getElementById('footer-icon-placeholder');
                    if (footerIcon) footerIcon.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i>';
                    
                    lucide.createIcons();
                } else {
                    console.warn("Lucide library not loaded.");
                }

                // --- 2. PDF 生成功能 ---
                const pdfButton = document.getElementById('pdf-button');
                if (pdfButton) {
                    pdfButton.addEventListener('click', async function() {
                        if (typeof html2canvas === 'undefined' || typeof window.jspdf === 'undefined') {
                            alert("PDF生成库加载失败，请检查网络连接并刷新页面。");
                            return;
                        }
                        const { jsPDF } = window.jspdf;
                        const button = this;
                        const exportArea = document.getElementById('capd-export-area'); 
                        const title = document.getElementById('note-title').textContent.trim() || 'CAPD行动计划表';

                        button.classList.add('loading');
                        button.innerHTML = '<span><i data-lucide="loader-2" class="inline-block w-5 h-5 mr-2 animate-spin"></i> 正在生成PDF...</span>';
                        if (typeof lucide !== 'undefined') lucide.createIcons();
                        
                        window.scrollTo(0, 0);

                        try {
                            const canvas = await html2canvas(exportArea, {
                                scale: 2,
                                useCORS: true,
                                onclone: (doc) => {
                                    doc.querySelectorAll('.no-print').forEach(el => el.style.display = 'none');
                                    doc.querySelectorAll('.editable-box:empty:before').forEach(el => el.style.display = 'none');
                                }
                            });
                            
                            const imgData = canvas.toDataURL('image/png');
                            const pdfWidth = 595.28; // A4 纵向
                            const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
                            
                            const pdf = new jsPDF({
                                orientation: 'portrait',
                                unit: 'pt',
                                format: [pdfWidth, pdfHeight]
                            });
                            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
                            pdf.save(`${title}.pdf`);

                        } catch (err) {
                            console.error('生成PDF失败: ', err);
                            alert("生成PDF失败，请重试。");
                        } finally {
                            button.classList.remove('loading');
                            button.innerHTML = '<span><i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为PDF</span>';
                            if (typeof lucide !== 'undefined') lucide.createIcons();
                        }
                    });
                }

                // --- 3. 导出Word文档功能 ---
                const docButton = document.getElementById('doc-button');
                if (docButton) {
                    let isDocFileReady = false;
                    docButton.addEventListener('click', function(e) {
                        if (isDocFileReady) {
                            isDocFileReady = false;
                            setTimeout(() => {
                                this.classList.remove('loading');
                                this.innerHTML = '<span><i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为文档</span>';
                                if (typeof lucide !== 'undefined') lucide.createIcons();
                            }, 1000);
                            return; 
                        }

                        e.preventDefault(); 
                        this.classList.add('loading');
                        this.innerHTML = '<span><i data-lucide="loader-2" class="inline-block w-5 h-5 mr-2 animate-spin"></i> 正在生成文档...</span>';
                        if (typeof lucide !== 'undefined') lucide.createIcons();

                        setTimeout(() => {
                            try {
                                const title = document.getElementById('note-title').innerHTML;
                                const obj = document.getElementById('col-obj').innerHTML;
                                const check = document.getElementById('col-check').innerHTML;
                                const action = document.getElementById('col-action').innerHTML;
                                const plan = document.getElementById('col-plan').innerHTML;
                                
                                // *** 关键修复：移除了那行错误的 `const- d` ***
                                const d = document.getElementById('col-do').innerHTML;

                                // Word 样式
                                const h1Style = "font-family: 'Noto Serif SC', serif; color: #333; text-align: left; font-size: 1.8em; font-weight: 700; margin-bottom: 24px; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px;";
                                const h2Style = "font-family: 'Noto Serif SC', serif; font-size: 1.25em; font-weight: 700; color: #EF4444; margin-bottom: 12px;"; // 红色
                                const boxStyle = "padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #f9f9f9; font-size: 14px; height: 120px; font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif; vertical-align: top;";

                                // 辅助函数
                                function createModule(title, content, style, boxStyle) {
                                    return `
                                    <div style="margin-bottom: 20px;">
                                        <h2 style="${style}">${title}</h2>
                                        <table style="width: 100%; border-collapse: collapse;"><tr><td style="${boxStyle}">${content || '&nbsp;'}</td></tr></table>
                                    </div>
                                    `;
                                }

                                const wordHtmlContent = `
                                    <div style="font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif; margin: 30px; max-width: 900px;">
                                        <h1 style="${h1Style}">${title}</h1>
                                        ${createModule('Objective (目标)', obj, h2Style, boxStyle)}
                                        ${createModule('Check (检查)', check, h2Style.replace('#EF4444', '#3B82F6'), boxStyle)}
                                        ${createModule('Action (方向)', action, h2Style.replace('#EF4444', '#A78BFA'), boxStyle)}
                                        ${createModule('Plan (计划)', plan, h2Style.replace('#EF4444', '#F59E0B'), boxStyle)}
                                        ${createModule('Do (执行)', d, h2Style.replace('#EF4444', '#10B981'), boxStyle)}
                                    </div>
                                `;
                                
                                const fullHtml = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>${title.replace(/<[^>]*>?/gm, '')}</title></head><body>${wordHtmlContent}</body></html>`;
                                const dataUri = 'data:application/vnd.ms-word;base64,' + btoa(unescape(encodeURIComponent(fullHtml)));
                                
                                this.href = dataUri;
                                this.download = `${title.replace(/<[^>]*>?/gm, '')}.doc`;
                                
                                this.classList.remove('loading');
                                this.innerHTML = '<span><i data-lucide="check-circle" class="inline-block w-5 h-5 mr-2"></i> 已就绪, 请再次点击下载</span>';
                                if (typeof lucide !== 'undefined') lucide.createIcons();
                                
                                isDocFileReady = true;

                            } catch (err) {
                                console.error("生成Word失败:", err);
                                alert("生成文档失败，请重试。");
                                this.classList.remove('loading');
                                this.innerHTML = '<span><i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为文档</span>';
                                if (typeof lucide !== 'undefined') lucide.createIcons();
                            }
                        }, 100);
                    });
                }
                
            } catch (e) {
                console.error("A fatal error occurred during initialization:", e);
            }
        }
        // 在CAPD.html的JavaScript部分最后添加这个功能
// 新增的导出长截图功能
const screenshotButton = document.getElementById('export-screenshot');
if (screenshotButton) {
    screenshotButton.addEventListener('click', function() {
        const element = document.getElementById('capd-content');
        const title = document.getElementById('note-title').textContent.trim() || 'CAPD行动计划表';
        
        // 临时移除占位符文本
        document.querySelectorAll('.editable-box:empty:before').forEach(el => {
            el.style.display = 'none';
        });
        
        // 使用html2canvas将内容转换为图片
        html2canvas(element, {
            scale: 2,
            useCORS: true,
            logging: false,
            backgroundColor: '#ffffff'
        }).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const a = document.createElement('a');
            a.href = imgData;
            a.download = `${title}_截图.png`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        });
    });
}
    </script>
</body>
</html>

